﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProjectTecnology.ascx.cs"
    Inherits="Demo.Web.Catalogs.ProjectTecnology" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script type="text/javascript">
    var getDragDropText = function () {
        var buf = [];

        buf.push("<ul>");

        Ext.each(this.view.panel.getSelectionModel().getSelection(), function (record) {
            buf.push("<li>" + record.data.Description + "</li>");
        });

        buf.push("</ul>");

        return buf.join("");
    };
</script>
<ext:Window ID="TecnologyWindow" runat="server" Icon="Group" Title="Asignar Tecnologias"
    Width="400" Height="300" AutoShow="false" Modal="true" Hidden="true" Layout="Fit"
    ConstrainHeader="false" Constrain="false">
    <Items>
        <ext:Panel ID="Panel1" runat="server" Width="350" Height="250">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Stretch" Padding="5" />
            </LayoutConfig>
            <Items>
                <ext:GridPanel ID="gpUnAssigned" runat="server" MultiSelect="true" Flex="1" Title="Sin Asignar"
                    Margins="0 2 0 0">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Id" />
                                        <ext:ModelField Name="Description" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel>
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="Tecnologia" DataIndex="Description"
                                Flex="1" />
                            <ext:Column ID="Column2" runat="server" Text="Column 1" DataIndex="Id" Visible="false" />
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GridView ID="GridView1" runat="server">
                            <Plugins>
                                <ext:GridDragDrop ID="GridDragDrop1" runat="server" DragGroup="firstGridDDGroup"
                                    DropGroup="secondGridDDGroup" />
                            </Plugins>
                            <Listeners>
                                <AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" />
                                <Drop Handler="var dropOn = overModel ? ' ' + dropPosition + ' ' + overModel.get('Description') : ' on empty view';" />
                            </Listeners>
                        </ext:GridView>
                    </View>
                </ext:GridPanel>
                <ext:GridPanel ID="gpAssigned" runat="server" MultiSelect="true" Title="Asignadas"
                    Flex="1" Margins="0 0 0 3">
                    <Store>
                        <ext:Store ID="Store2" runat="server">
                            <Model>
                                <ext:Model ID="Model2" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Id" />
                                        <ext:ModelField Name="Description" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel>
                        <Columns>
                            <ext:Column ID="Column3" runat="server" Text="Tecnologia" DataIndex="Description"
                                Flex="1" />
                            <ext:Column ID="Column4" runat="server" Text="Column 1" DataIndex="Id" Visible="false" />
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GridView ID="GridView2" runat="server">
                            <Plugins>
                                <ext:GridDragDrop ID="GridDragDrop2" runat="server" DragGroup="secondGridDDGroup"
                                    DropGroup="firstGridDDGroup" />
                            </Plugins>
                            <Listeners>
                                <AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" />
                                <Drop Handler="var dropOn = overModel ? ' ' + dropPosition + ' ' + overModel.get('Description') : ' on empty view';" />
                            </Listeners>
                        </ext:GridView>
                    </View>
                </ext:GridPanel>
            </Items>
            <Buttons>                
                <ext:Button ID="Button2" runat="server" Text="Asignar" Icon="Add">
                    <DirectEvents>
                        <Click OnEvent="Asignar">
                            <ExtraParams>
                                <ext:Parameter Name="Assigned" Value="Ext.encode(#{gpAssigned}.getRowsValues())"
                                    Mode="Raw" />
                                <ext:Parameter Name="UnAssigned" Value="Ext.encode(#{gpUnAssigned}.getRowsValues())"
                                    Mode="Raw" />
                            </ExtraParams>
                            <EventMask ShowMask="true" />
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button ID="Button1" runat="server" Text="Restablecer Datos" Icon="Decline">
                    <Listeners>
                        <Click Handler="#{Store1}.loadData(#{Store1}.proxy.data); #{Store2}.loadData(#{Store2}.proxy.data);" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>
    </Items>
</ext:Window>
